<template>
  <div style="height: 340px;margin-bottom:20px">
    <img src="../../public/imgs/banner3.png" style="width: 100%;height:340px;"/>
  </div>
  <!--轮播图区域 高度:240px-->
  <el-carousel style="height: 140px;">
    <el-carousel-item v-for="(url,index) in bannerArr" :key="index">
      <img :src="url" style="width: 100%">
    </el-carousel-item>
  </el-carousel>
  <!-- 旅游列表  -->
  <span >景点推荐</span>
  <el-row :gutter="10">
    <el-col :span="6" v-for="(p,index) in productArr" style="margin: 10px 0;" :key="index">
      <el-card>
        <img :src="p.url" style="width:100%;height: 100%;">
        <p>{{p.title}}</p>
        <el-rate
            v-model="p.lvcard"
            disabled
            text-color="#ff9900"
        />
        <div style="color:#007fe9;display:flex;margin-bottom:10px"><span class="spanPfen">{{p.lvcard}}/5</span>
          <div v-if="p.lvcard >= 3">超棒</div>
          <div v-else>体验良好</div>
        </div>
        <div>
          <span style="color: red;">¥{{p.price}}<s>起</s></span>
        </div>
        <div style="margin-top:10px;font-size:12px">1980条评论</div>
      </el-card>
    </el-col>
  </el-row>

  <span>酒店推荐</span>
  <el-row :gutter="10">
    <el-col :span="6" v-for="(p,index) in Arr" style="margin: 10px 0;" :key="index">
      <el-card>
        <img :src="p.url" style="width:100%;height: 100%;">
        <p>{{p.title}}</p>
        <el-rate
            v-model="p.lvcard"
            disabled
            text-color="#ff9900"
        />
        <div style="color:#007fe9;display:flex;margin-bottom:10px"><span class="spanPfen">{{p.lvcard}}/5</span>
          <div v-if="p.lvcard >= 3">棒</div>
          <div v-else>体验良好</div>
        </div>
        <div>
          <span style="color: red;">¥{{p.price}}</span>
        </div>
        <div style="margin-top:10px;font-size:12px">655条评论</div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup>
//准备轮播图数组
import {ref} from "vue";

const bannerArr = ref(["/imgs/banner5.jpg","/imgs/banner4.jpg"]);
//景点推荐数组图片
const productArr = ref([
  {title: "西安5日4晚跟团游", price: 2600,url: "/imgs/a.jpg",lvcard:2},
  {title: "山西+河北10日9晚私家团", price: 888,  url: "/imgs/b.jpg",lvcard:2},
  {title: "青岛+威海+烟台+蓬莱5日4晚跟团游", price: 5600, url: "/imgs/c.jpg",lvcard:2},
  {title: "山西长治太行山大峡谷2日1晚跟团游", price: 999, url: "/imgs/d.jpg",lvcard:5},
  {title: "重庆3日2晚拼小团", price: 3800, url: "/imgs/e.jpg",lvcard:3},
  {title: "香港+澳门5日4晚半自助游", price: 9800,  url: "/imgs/f.jpg",lvcard:2},
  {title: "成都+九寨沟+黄龙风景名胜区+都江堰景区+三星堆博物馆6日5晚跟团游", price: 6000, url: "/imgs/g.jpg",lvcard:2},
  {title: "北京5日4晚跟团游", price: 5000, url: "/imgs/h.jpg",lvcard:1},
  {title: "海南三亚5日4晚跟团游", price: 30000,  url: "/imgs/i.jpg",lvcard:2},
  {title: "内蒙古呼和浩特+希拉穆仁草原+响沙湾5日4晚私家团", price: 9999,  url: "/imgs/j.jpg",lvcard:4},
  {title: "香港+澳门5日4晚半自助游", price: 45000, url: "/imgs/k.jpg",lvcard:3},
  {title: "昆明+大理市+丽江+玉龙雪山+西双版纳8日7晚跟团游", price: 7000,  url: "/imgs/l.jpg",lvcard:4}]);

// 酒店推荐图片数组
const Arr = ref([
  {title: "长沙国金中心异国印象·悦酒店", price: 319,url: "/imgs/m.jpg",lvcard:2},
  {title: "深圳海岸城购物中心南山地铁站亚朵酒店", price: 459,  url: "/imgs/n.jpg",lvcard:2},
  {title: "三亚梧桐九里·Aromatic海景艺宿(天涯海角店)", price: 458, url: "/imgs/q.jpg",lvcard:5},
  {title: "天津蓝庭假日酒店(五大道直沽地铁站店)", price: 666,  url: "/imgs/t.jpg",lvcard:2},
  {title: "俪居花园酒店(武汉体育中心江汉大学店)", price: 300, url: "/imgs/s.jpg",lvcard:3},
  {title: "长沙国金中心异国印象·悦酒店", price: 213, url: "/imgs/z.jpg",lvcard:2},
  {title: "万澳酒店(厦门火车站文灶地铁站店)", price: 360, url: "/imgs/p.jpg",lvcard:2},
  {title: "和颐至尚酒店(上海前滩世博园店)", price: 456, url: "/imgs/r.jpg",lvcard:1}]);
</script>


<style scoped>
.spanPfen{
  display: block;
  width: 30px;
  height: 20px;
  background: #007fe9;
  color: #fff;
  text-align: center;
  line-height: 20px;
  border-radius: 5px;
  margin-right: 10px;
}
</style>